<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>09.layui辅助元素</title>
        <link rel="stylesheet" href="static/layui-2.5.6/css/layui.css">
    </head>
    <body>
        <div class="layui-container">
            <div class="layui-row layui-col-lg-offset2 layui-col-lg8">
                <!-- 引用 -->
                <blockquote class="layui-elem-quote">引用区域的文字</blockquote>
                <blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>
                <hr/>

                <!-- 字段集区块 -->
                <fieldset class="layui-elem-field">
                    <legend>字段集区块 - 默认风格</legend>
                    <div class="layui-field-box">
                        内容区域
                    </div>
                </fieldset>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>字段集区块 - 横线风格</legend>
                    <div class="layui-field-box">
                        内容区域
                    </div>
                </fieldset>
                <hr/>

                <!-- 彩色分割线 -->
                <!-- 赤色分割线 -->
                <hr class="layui-bg-red">
                <!-- 橙色分割线 -->
                <hr class="layui-bg-orange">
                <!-- 墨绿分割线 -->
                <hr class="layui-bg-green">
                <!-- 青色分割线 -->
                <hr class="layui-bg-cyan">
                <hr/>

                <!-- 文字的一些操作, 文字提供的不多, 居中大小等, 需要自己设置 -->
                <div class="layui-row">
                    <div class="layui-text">
                        <p style="text-align: center; font-size: 18px;">短歌行</p>
                        <p style="text-align: center; font-size: 15px;">
                            白日何短短，百年苦易满。<br/>
                            苍穹浩茫茫，万劫太极长。<br/>
                            麻姑垂两鬓，一半已成霜。<br/>
                            天公见玉女，大笑亿千场。<br/>
                            吾欲揽六龙，回车挂扶桑。<br/>
                            北斗酌美酒，劝龙各一觞。<br/>
                            富贵非所愿，与人驻颜光。<br/>
                        </p>
                    </div>
                </div>
            </div>
        </div>


        <script src="static/layui-2.5.6/layui.js"></script>
        <script>
            // element是导航, 选项卡需要的组件
            layui.use(['layer', 'form', 'element'], function () {
                var layer = layui.layer,
                    form = layui.form,
                    element = layui.element;
            });
        </script>
    </body>
</html>
